import React, { memo, useMemo, useReducer } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import { ORDER_DEPART } from '../../constant';

import './Bottom.css';


//组件本地化存储
function checkedReducer (state, action) {
	const { type, payload } = action;
	let newState;

	switch (type) {
		case 'toggle':
			newState = { ...state };
			if (payload in newState) {
				delete newState[payload];
			} else {
				newState[payload] = true;
			}
			return newState;
		case 'reset':
			return {};
		default:
	}

	return state;
}

const Filter = memo(function Filter (props) {
	const { name, checked, value, dispatch } = props;

	return (
		<li
			className={classnames({ checked })}
			onClick={() => dispatch({ payload: value, type: 'toggle' })}
		>
			{name}
		</li>
	);
});

Filter.propTypes = {
	name: PropTypes.string.isRequired,
	checked: PropTypes.bool.isRequired,
	value: PropTypes.string.isRequired,
	dispatch: PropTypes.func.isRequired,
};

const Option = memo(function Option (props) {
	const { title, options, checkedMap, dispatch } = props;

	return (
		<div className="option">
			<h3>{title}</h3>
			<ul>
				{options.map(option => {
					return (
						<Filter
							key={option.value}
							{...option}
							checked={option.value in checkedMap}
							dispatch={dispatch}
						/>
					);
				})}
			</ul>
		</div>
	);
});

Option.propTypes = {
	title: PropTypes.string.isRequired,
	options: PropTypes.array.isRequired,
	checkedMap: PropTypes.object.isRequired,
	dispatch: PropTypes.func.isRequired,
};

const BottomModal = memo(function BottomModal (props) {
	const {
		ticketTypes,
		trainTypes,
		departStations,
		arriveStations,

		checkedTicketTypes,
		checkedTrainTypes,
		checkedDepartStations,
		checkedArriveStations,


		setCheckedTicketTypes,
		setCheckedTrainTypes,
		setCheckedDepartStations,
		setCheckedArriveStations,

		toggleIsFiltersVisible,
	} = props;


	const [
		localCheckedTicketTypes,
		localCheckedTicketTypesDispatch,
	] = useReducer(checkedReducer, checkedTicketTypes, checkedTicketTypes => {
		return {
			...checkedTicketTypes,
		};
	});


	const [localCheckedTrainTypes, localCheckedTrainTypesDispatch] = useReducer(
		checkedReducer,
		checkedTrainTypes,
		checkedTrainTypes => {
			return {
				...checkedTrainTypes,
			};
		}
	);

	const [
		localCheckedDepartStations,
		localCheckedDepartStationsDispatch,
	] = useReducer(
		checkedReducer,
		checkedDepartStations,
		checkedDepartStations => {
			return {
				...checkedDepartStations,
			};
		}
	);

	const [
		localCheckedArriveStations,
		localCheckedArriveStationsDispatch,
	] = useReducer(
		checkedReducer,
		checkedArriveStations,
		checkedArriveStations => {
			return {
				...checkedArriveStations,
			};
		}
	);

	const isResetDisabled = useMemo(() => {
		return (
			Object.keys(localCheckedTicketTypes).length === 0 &&
			Object.keys(localCheckedTrainTypes).length === 0 &&
			Object.keys(localCheckedDepartStations).length === 0 &&
			Object.keys(localCheckedArriveStations).length === 0
		);
	}, [
		localCheckedTicketTypes,
		localCheckedTrainTypes,
		localCheckedDepartStations,
		localCheckedArriveStations,
	]);

	function sure () {
		setCheckedTicketTypes(localCheckedTicketTypes);
		setCheckedTrainTypes(localCheckedTrainTypes);
		setCheckedDepartStations(localCheckedDepartStations);
		setCheckedArriveStations(localCheckedArriveStations);

		toggleIsFiltersVisible();
	}


	function reset () {
		if (isResetDisabled) {
			return;
		}

		localCheckedTicketTypesDispatch({ type: 'reset' });
		localCheckedTrainTypesDispatch({ type: 'reset' });
		localCheckedDepartStationsDispatch({ type: 'reset' });
		localCheckedArriveStationsDispatch({ type: 'reset' });
	}

	const optionGroup = [
		{
			title: '坐席类型',
			options: ticketTypes,
			checkedMap: localCheckedTicketTypes,
			dispatch: localCheckedTicketTypesDispatch,
		},
		{
			title: '车次类型',
			options: trainTypes,
			checkedMap: localCheckedTrainTypes,
			dispatch: localCheckedTrainTypesDispatch,
		},
		{
			title: '出发车站',
			options: departStations,
			checkedMap: localCheckedDepartStations,
			dispatch: localCheckedDepartStationsDispatch,

		},
		{
			title: '到达车站',
			options: arriveStations,
			checkedMap: localCheckedArriveStations,
			dispatch: localCheckedArriveStationsDispatch,
		},
	];
	return (
		<div className="bottom-modal">
			<div className="bottom-dialog">
				<div className="bottom-dialog-content">
					<div className="title">
						<span
							className={classnames('reset', {
								disabled: isResetDisabled,
							})}
							onClick={reset}
						>
							重置
                        </span>
						<span className="ok" onClick={sure}>
							确定
                        </span>
					</div>
					<div className="options">
						{optionGroup.map(group => (
							<Option {...group} key={group.title} />
						))}
					</div>
				</div>
			</div>
		</div>
	)
})

BottomModal.propTypes = {
	ticketTypes: PropTypes.array.isRequired,
	trainTypes: PropTypes.array.isRequired,
	departStations: PropTypes.array.isRequired,
	arriveStations: PropTypes.array.isRequired,

	checkedTicketTypes: PropTypes.object.isRequired,
	checkedTrainTypes: PropTypes.object.isRequired,
	checkedDepartStations: PropTypes.object.isRequired,
	checkedArriveStations: PropTypes.object.isRequired,

	setCheckedTicketTypes: PropTypes.func.isRequired,
	setCheckedTrainTypes: PropTypes.func.isRequired,
	setCheckedDepartStations: PropTypes.func.isRequired,
	setCheckedArriveStations: PropTypes.func.isRequired,
}
export default function Bottom (props) {
	const {
		toggleOrderType,
		toggleHighSpeed,
		toggleOnlyTickets,
		toggleIsFiltersVisible,
		highSpeed,
		orderType,
		onlyTickets,
		isFiltersVisible,

		ticketTypes,
		trainTypes,
		departStations,
		arriveStations,

		checkedTicketTypes,
		checkedTrainTypes,
		checkedDepartStations,
		checkedArriveStations,

		setCheckedTicketTypes,
		setCheckedTrainTypes,
		setCheckedDepartStations,
		setCheckedArriveStations,
	} = props;

	const noChecked = useMemo(() => {
		return (
			true
		);
	}, [
	]);


	return (
		<div className="bottom">
			<div className="bottom-filters">
				<span className="item" onClick={toggleOrderType}>
					<i className="icon">&#xf065;</i>
					{orderType === ORDER_DEPART ? '出发 早→晚' : '耗时 短→长'}
				</span>
				<span
					className={classnames('item', { 'item-on': highSpeed })}
					onClick={toggleHighSpeed}
				>
					<i className="icon">{highSpeed ? '\uf43f' : '\uf43e'}</i>
                    只看高铁动车
                </span>
				<span
					className={classnames('item', { 'item-on': onlyTickets })}
					onClick={toggleOnlyTickets}
				>
					<i className="icon">{onlyTickets ? '\uf43d' : '\uf43c'}</i>
                    只看有票
                </span>
				<span
					className={classnames('item', {
						'item-on': isFiltersVisible || !noChecked,
					})}
					onClick={toggleIsFiltersVisible}
				>
					<i className="icon">{noChecked ? '\uf0f7' : '\uf446'}</i>
                    综合筛选
                </span>
			</div>
			{isFiltersVisible && (
				<BottomModal

					toggleIsFiltersVisible={toggleIsFiltersVisible}

					ticketTypes={ticketTypes}
					trainTypes={trainTypes}
					departStations={departStations}
					arriveStations={arriveStations}

					checkedTicketTypes={checkedTicketTypes}
					checkedTrainTypes={checkedTrainTypes}
					checkedDepartStations={checkedDepartStations}
					checkedArriveStations={checkedArriveStations}

					setCheckedTicketTypes={setCheckedTicketTypes}
					setCheckedTrainTypes={setCheckedTrainTypes}
					setCheckedDepartStations={setCheckedDepartStations}
					setCheckedArriveStations={setCheckedArriveStations}
				/>
			)}
		</div>
	)
}

Bottom.propTypes = {
	toggleOrderType: PropTypes.func.isRequired,
	toggleHighSpeed: PropTypes.func.isRequired,
	toggleOnlyTickets: PropTypes.func.isRequired,
	toggleIsFiltersVisible: PropTypes.func.isRequired,
	highSpeed: PropTypes.bool.isRequired,
	orderType: PropTypes.number.isRequired,
	onlyTickets: PropTypes.bool.isRequired,

	isFiltersVisible: PropTypes.bool.isRequired,

	ticketTypes: PropTypes.array.isRequired,
	trainTypes: PropTypes.array.isRequired,
	departStations: PropTypes.array.isRequired,
	arriveStations: PropTypes.array.isRequired,

	checkedTicketTypes: PropTypes.object.isRequired,
	checkedTrainTypes: PropTypes.object.isRequired,
	checkedDepartStations: PropTypes.object.isRequired,
	checkedArriveStations: PropTypes.object.isRequired,

	setCheckedTicketTypes: PropTypes.func.isRequired,
	setCheckedTrainTypes: PropTypes.func.isRequired,
	setCheckedDepartStations: PropTypes.func.isRequired,
	setCheckedArriveStations: PropTypes.func.isRequired,
}
